<template>
    <div v-if="morelist">
        <hander-bar v-scroll="50" :movename="morelist.name"></hander-bar>
        <!-- 顶部电影图片 -->
        <div class="img" :style="{'backgroundImage':'url('+ morelist.poster +')'}"></div>

        <!-- 文字简介 -->
        <div class="textArea">
            <div class="nametitle">{{ morelist.name }}</div>
            <div class="chinese">{{ morelist.category }}</div>
            <div class="chinese">{{ showData }}</div>
            <div class="chinese">{{ morelist.nation }}| {{ morelist.runtime }}分钟</div>
            <div class="chinese syno" @click="isShow = !isShow" :class="isShow?'hidden':''">{{ morelist.synopsis }}</div>
        </div>

        <!-- 演员表 -->
        <div style="padding:15px; margin-left:7px;">
            <div style="font-size:16px; margin:15px; height:0.30rem;">演职人员</div>
            <roleSwiper :imgnum="3" name="actors">
                <div v-for="(item,index) in morelist.actors" :key="index" class="swiper-slide">
                    <div :style="{backgroundImage:'url('+ item.avatarAddress +')'}" class="actorsimg"></div>
                    <div class="actorsname">{{ item.name }}</div>
                    <div class="rolename">{{ item.role }}</div>
                </div>
            </roleSwiper>
        </div>

        <!-- 剧照 -->
        <div style="padding:15px; margin-left:7px;">
            <div style="font-size:16px; margin:15px; height:0.30rem;">剧照</div>
            <roleSwiper :imgnum="2.3" name="photos" :interval="20">
                <div v-for="(item,index) in morelist.photos" :key="index" class="swiper-slide" @click='handle(index)'>
                    <div :style="{backgroundImage:'url('+ item +')'}" class="moveimg"></div>
                </div>
            </roleSwiper>
        </div>
    </div>
</template>
<script>
import http from '@/util/http' //导入封装的axios
import isshowobj from '@/util/mixinObj.js'
import moment from 'moment'
import roleSwiper from '@/Components/more/roleSwiper.vue'
import handerBar from '@/Components/more/handerBar.vue'
import Vue from 'vue'
import { ImagePreview } from 'vant'
moment.locale('zh-cn')
Vue.directive('scroll',{
    inserted(el,binding){
        el.style.display = 'none'
        window.onscroll = ()=>{
            if(document.documentElement.scrollTop||document.body.scrollTop > binding.value){
                el.style.display = 'block'
            }else{
                el.style.display = 'none'
            }
        }
    }
})

export default {
    mixins:[isshowobj]
    ,
    mounted(){
        http({
        url:`/gateway?filmId=${this.$route.params.myid}&k=6912686`, //往封装的的链接后加上这些
        headers:{
            'X-Host': 'mall.film-ticket.film.info' //除了封装的请求头之外的请求头
        }}).then(res=>{
            this.morelist = res.data.data.film
        })
    },
    data(){
        return {
            morelist:null,
            isShow:true
        }
    },
    computed:{
        showData(){
            return moment(this.morelist.premiereAt * 1000).format('YYYY-MMM-Do')
        }
    },
    components:{
        roleSwiper,
        handerBar
    },
    methods:{
        handle(item){
            ImagePreview({
                images:this.morelist.photos,
                startPosition: 1,
                closeable: true,
                closeIconPosition:'top-left'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.img{
    background-size: cover;
    background-position: center center;
    height: 2rem;
    width: 100%;
}
.textArea{
    margin: 0.07rem;
    padding: 15px;
}
.nametitle{
    color: black;
    font-size: 18px;
    line-height: 24px;
}
.chinese{
    font-size: 13px;
    color: #797d82;
    margin-top: 4px;
}
.hidden{
    height: 36px;
    overflow: hidden;
}
.syno{
    margin-top: 12px;
}
.actorsimg{
    padding: 0.1rem;
    background-size: cover;
    background-position: center center;
    height: 0.85rem;
    width: 0.85rem;
}
.actorsname{
    font-size: 12px;
    color: #191a1b;
    text-align: center;
}
.rolename{
    font-size: 10px;
    color: #797d82;
    text-align: center;
}

.moveimg{
    background-size: cover;
    background-position: center center;
    height: 0.95rem;
    width: 1.5rem;
}
</style>
